<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>阳台报价系统</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <style>
        body {
            background-color: #f8f9fa;
        }
        .container {
            padding-top: 30px;
        }
        .model-image {
            max-width: 100%;
            margin-top: 20px;
        }
        select.form-control {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-row {
            justify-content: center;
        }
        .form-group.col-md-6 {
            flex: 1;
            padding-right: 10px;
            padding-left: 10px;
        }
        .form-group.col-md-6:last-child {
            padding-right: 0;
        }
        .input-group-text {
            width: 80px; /* 设置标签宽度 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">阳台报价系统</h1>
        <div class="row justify-content-center">
            <div class="col-md-10 col-sm-12">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="modelSelect" class="d-block text-center">框架大小</label>
                        <select class="form-control" id="modelSelect" onchange="showImage()">
                            <option value="">请选择型材</option>
                            <option value="model1">110-型材</option>
                            <option value="model2">90-型材</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="materialSelect" class="d-block text-center">框架材质</label>
                        <select class="form-control" id="materialSelect">
                            <option value="">请选择材质</option>
                            <option value="material1">塑钢</option>
                            <option value="material2">铝合金</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">长度(cm)</span>
                            </div>
                            <input type="number" step="any" class="form-control" id="lengthInput" placeholder="请输入长度">
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">宽度(cm)</span>
                            </div>
                            <input type="number" step="any" class="form-control" id="widthInput" placeholder="请输入宽度">
                        </div>
                    </div>
                </div>
                <div class="form-row justify-content-center">
                    <button type="button" class="btn btn-primary" onclick="calculatePrice()">开始计算</button>
                </div>
                <img id="modelImage" src="" alt="型号图片" class="model-image d-none">
            </div>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script>
        function showImage() {
            var model = document.getElementById('modelSelect').value;
            var image = document.getElementById('modelImage');
            if (model === 'model1') {
                image.src = 'img/110.png';
                image.classList.remove('d-none');
            } else if (model === 'model2') {
                image.src = 'https://via.placeholder.com/300?text=型号2';
                image.classList.remove('d-none');
            } else {
                image.classList.add('d-none');
            }
        }

        function calculatePrice() {
            var length = parseFloat(document.getElementById('lengthInput').value);
            var width = parseFloat(document.getElementById('widthInput').value);

            if (isNaN(length) || isNaN(width)) {
                alert('请输入有效的长度和宽度');
                return;
            }

            // 示例计算逻辑，可以根据实际需求调整
            var pricePerSquareMeter = 100; // 每平方米的价格
            var area = length * width;
            var totalPrice = area * pricePerSquareMeter;

            alert('总面积: ' + area.toFixed(2) + ' m²\n总价: ' + totalPrice.toFixed(2) + ' 元');
        }
    </script>
</body>
</html>



